import Icons from "@app-nextmesh-env/nextmesh/Icons"
import { IToolRadioOption } from '@app-nextmesh-env/nextmesh/components/types'
import { useState } from 'react'

interface IProps {
  options: Array<IToolRadioOption>
  onRadioItemClick: (value: string) => void
  scope?: string
}

export default function RadioGroup({ options, onRadioItemClick, scope }: IProps) {
  const [opts, setOpts] = useState([...options])
  const ButtonIcon = ({ icon }: { icon?: string }) => {
    return (<>{icon ? <Icons name={icon} /> : null}</>)
  }

  const handleRadioItemClick = (e, option: IToolRadioOption) => {
    options.forEach(option => {
      option.isActived = false
    })
    option.isActived = true
    setOpts([...options])
    onRadioItemClick(option.value)
  }
  const scp = scope ?? 'SELECTION'

  return (<>{
    opts.map(option => {
      return (
        <li key={option.value} className="nm-ViewerToolbar-item"
          title={option.disabled ? option.disabledLabel : option.label}>
          <div>{option.isActived}</div>
          <button className={`scope_${scp} nm-VTbutton${option.isActived && !option.disabled ? ' nm-VTbutton--isActive' : ''}`}
            disabled={option.disabled}
            onClick={e => handleRadioItemClick(e, option)}>
            <ButtonIcon icon={option.icon} />
          </button>
        </li>
      )
    })
  }</>)
}
